Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: UX Refinements on tagging components [FC-0036] #33884

Merged
merged 8 commits into from
Dec 13, 2023
Merged

style: UX Refinements on tagging components [FC-0036] #33884

merged 8 commits into from
Dec 13, 2023

Conversation

ChrisChV
Copy link
Contributor

@ChrisChV ChrisChV commented Dec 5, 2023 •
edited
Loading

Description

This PR fix/adds the following:

Supporting information

Github issue: openedx/modular-learning#157
Internal ticket: FAL-3537

Testing instructions

  • Enable contentstore.enable_copy_paste_units and new_studio_mfe.use_tagging_taxonomy_list_page flags.
  • Before to all you need to run the taxonomy-sample-data.

"Please change the order of the items in the unit menu to:"

  • Go to a course, expand an unit and verify the new order of the menu.

"Please change the order of the items in the component menu to:"

  • Go to a unit and verify the new order of the menu

There is a strange 'jump' when I first expand the "Tags" sidebar component. The area containing the "Tags" heading, tag count, and up/down arrow seems to shift down a few pixels when it is first clicked

  • Go to a unit and verify that the 'jump' is gone when you expand de 'Tags' component.

This section also shows a dotted outline after it is selected

  • Go to a unit and verify the dotted outline is gone when you click on 'Tags' componene. But when you use the keyboard should appear.

If a tag cannot be expanded (i.e. leaf tags), it should not have a hover state

  • Go to a unit and verify the change on the 'Tags' component

Change the default URL for the "Taxonomies" tab to go to /taxonomies/ directly, not /taxonomy-list/

  • Go to studio home and click on the 'Taxonomies' tab. Verify the new URL.

Other information

6. Slack: Refresh the count of tags on the unit/outline page(s) after the user makes edits in the tag drawer

This issue has not been fixed since openedx/frontend-app-authoring#704 is still open

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Dec 5, 2023
@ChrisChV ChrisChV marked this pull request as draft December 5, 2023 16:17
@openedx-webhooks
Copy link

openedx-webhooks commented Dec 5, 2023 •
edited
Loading

Thanks for the pull request, @ChrisChV! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

  • supporting documentation
  • Open edX discussion forum threads
  • timeline information ("this must be merged by XX date", and why that is)
  • partner information ("this is a course on edx.org")
  • any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

@ChrisChV ChrisChV marked this pull request as ready for review December 6, 2023 17:57
@open-craft-grove
Copy link

Sandbox deployment successful.

Sandbox LMS is available at pr-33884-139931.staging.do.opencraft.hosting
Sandbox Studio is available at studio.pr-33884-139931.staging.do.opencraft.hosting

Instance config : https://grove-stage-build-logs.nyc3.digitaloceanspaces.com/34602668-5696107567-config.yml
Instance requirements : https://grove-stage-build-logs.nyc3.digitaloceanspaces.com/34602668-5696107567-requirements.txt

yusuf-musleh
yusuf-musleh approved these changes Dec 7, 2023
View reviewed changes
Copy link
Member

@yusuf-musleh yusuf-musleh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 @ChrisChV I checked all the cases, things seem to be working as expected, however I had doubts/issues with two of them:

There is a strange 'jump' when I first expand the "Tags" sidebar component. The area containing the "Tags" heading, tag count, and up/down arrow seems to shift down a few pixels when it is first clicked

  • Go to a unit and verify that the 'jump' is gone when you expand de 'Tags' component.

The jump is now gone when clicking to expand the Tags component. However when you tab on the page and the focus becomes on the 'Tags' header, things get shifted a few pixels as well, not sure if its the same "jump" or not.

If a tag cannot be expanded (i.e. leaf tags), it should not have a hover state

  • Go to a unit and verify the change on the 'Tags' component

This is now fixed, however when clicking on a tag to expand/close, it remains blue, until I click elsewhere, is that intended behavior?

  • I tested this: (I checked all the cases to confirm they are working, I have doubts on 2 of them though)
  • I read through the code
  • I checked for accessibility issues
  • Includes documentation
  • I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository.

@ChrisChV
Copy link
Contributor Author

ChrisChV commented Dec 8, 2023

If a tag cannot be expanded (i.e. leaf tags), it should not have a hover state

  • Go to a unit and verify the change on the 'Tags' component

This is now fixed, however when clicking on a tag to expand/close, it remains blue, until I click elsewhere, is that intended behavior?

I think this is a question for @ali-hugo

The jump is now gone when clicking to expand the Tags component. However when you tab on the page and the focus becomes on the 'Tags' header, things get shifted a few pixels as well, not sure if its the same "jump" or not.

@yusuf-musleh I fixed that here c2c4e70

@open-craft-grove
Copy link

Sandbox deployment successful.

Sandbox LMS is available at pr-33884-139931.staging.do.opencraft.hosting
Sandbox Studio is available at studio.pr-33884-139931.staging.do.opencraft.hosting

Instance config : https://grove-stage-build-logs.nyc3.digitaloceanspaces.com/34602668-5707998831-config.yml
Instance requirements : https://grove-stage-build-logs.nyc3.digitaloceanspaces.com/34602668-5707998831-requirements.txt

@bradenmacdonald
Copy link
Contributor

This is now fixed, however when clicking on a tag to expand/close, it remains blue, until I click elsewhere, is that intended behavior?
I think this is a question for @ali-hugo

She is on holiday now or starting soon so I'm just going to make the call: I think it's strange how it stays blue now. Please remove the :focus so that it's only blue on hover, and it doesn't stay blue after you click.

(But as before, make sure there is a visual indication when it is focused by keyboard. I think that should still happen "automatically" but if it's not, you'll need to add a :focus-visible style to this one as well. But it should be a dotted rectangle outline like the others - turning a link from black to blue is too subtle and not appropriate for a keyboard focus indicator.)

bradenmacdonald
bradenmacdonald reviewed Dec 8, 2023
View reviewed changes
Copy link
Contributor

@bradenmacdonald bradenmacdonald left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Please just fix the issue @yusuf-musleh noticed and this will be good to go.

cms/static/sass/views/_container.scss Outdated Show resolved Hide resolved
@ChrisChV
Copy link
Contributor Author

@bradenmacdonald This is ready for merge

bradenmacdonald
bradenmacdonald approved these changes Dec 13, 2023
View reviewed changes
Copy link
Contributor

@bradenmacdonald bradenmacdonald left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

  • I tested this: in Studio
  • I read through the code
  • I checked for accessibility issues
  • Includes documentation: n/a

@bradenmacdonald bradenmacdonald merged commit 6763928 into openedx:master Dec 13, 2023
64 checks passed
@bradenmacdonald bradenmacdonald deleted the chris/FAL-3537-ux-refinements branch December 13, 2023 19:28
@openedx-webhooks
Copy link

@ChrisChV 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

@edx-pipeline-bot
Copy link
Contributor

2U Release Notice: This PR has been deployed to the edX staging environment in preparation for a release to production.

@edx-pipeline-bot
Copy link
Contributor

2U Release Notice: This PR has been deployed to the edX production environment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yusuf-musleh yusuf-musleh yusuf-musleh approved these changes

@bradenmacdonald bradenmacdonald bradenmacdonald approved these changes

Assignees
No one assigned
Labels
open-source-contribution PR author is not from Axim or 2U
Projects
Contributions
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@ChrisChV @openedx-webhooks @open-craft-grove @bradenmacdonald @edx-pipeline-bot @yusuf-musleh